import React, { useState, createRef } from 'react';
import dynamic from 'umi/dynamic';
import PageLoading from '@/components/PageLoading';
import SearchForm from './components/SearchForm';

const OrderTable = dynamic({
  loader: () => import(`./components/OrderTable`),
  loading: PageLoading,
});

function Index() {
  const [paramsObj, setParamsObj] = useState({});
  const formRef = createRef();

  function handleSearch() {
    const { form } = formRef.current;
    setParamsObj(form.getParamsObj());
  }

  return (
    <>
      <div style={{ marginBottom: '8px' }}>
        <SearchForm onSearch={handleSearch} wrappedComponentRef={formRef} />
      </div>
      <div>
        <OrderTable paramsObj={paramsObj} />
      </div>
    </>
  );
}

export default Index;
